<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const tableData = ref([])


const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;

  getDepartment(currentPage.value);

})
const getDepartment =(pageNum)=>{
  axios.get(BASE_URL+'/v1/department/select/pageNum='+pageNum).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data.list;
      total.value = response.data.data.maxPage;
    }
  })
}

const check = (department)=>{
  router.push('/newDepartment?id='+department.id);
}

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getDepartment(val);
}
const currentPage = ref(1)
const total = ref()
</script>

<template>
  <el-card style="height: 75px;width: 1645px" >
    <el-container >
      <el-row style="width: 100%;height: 100%">

        <el-col :span="5" style="padding-top:5px ;margin: 0 auto">
          <span style="text-align: left">部门名称</span>
          <el-input style="width: 200px; margin-left: 5px" placeholder="请输入部门的名字"></el-input>
        </el-col>

        <el-col :span="12">
          <el-row style="padding-top: 5px">
            <el-col :span="3"><div style="color: gray;line-height: 30px">创建时间</div></el-col>
            <el-col :span="2"><el-button class="headerButton">今天</el-button></el-col>
            <el-col :span="3"><el-button class="headerButton">最近7天</el-button></el-col>
            <el-col :span="3"><el-button class="headerButton">最近1个月</el-button></el-col>
          </el-row>
        </el-col>

        <el-col :span="6">
          <el-row >
            <el-button type="success">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-container>
  </el-card>

  <el-card style="margin-top:10px ;width: 1645px;height:813px" >
    <el-table :data="tableData" style="width: 100%;text-align: left">
      <el-table-column width="50">
        <el-checkbox label="" size="large"></el-checkbox>
      </el-table-column>
      <el-table-column type="index" label="序号" width="130"/>
      <el-table-column prop="name" label="科室名称" width="180"/>
      <el-table-column prop="levelName" label="上级部门" width="180"/>
      <el-table-column prop="doctorName" label="联系人" width="150"/>
      <el-table-column prop="contactMobile" label="联系电话" width="210"/>
      <el-table-column prop="createUser" label="创建人" width="170"/>
      <el-table-column prop="gmtCreate" label="创建时间" width="210"/>
      <el-table-column prop="status" label="状态" width="165"/>
      <el-table-column prop="operate" label="操作" width="150">
        <template #default="scope">
          <el-button type="success" class="tableButton" @click="check(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="divPagination">
      <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next, jumper"
          :total="total*10"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<style scoped>
.divPagination{
  margin-left: 1300px;
  margin-top: 20px
}
.tableButton{
  height: 20px ;width: 20px
}
.headerButton{
  border: none;
  line-height: 1px;
}
.headerButton:hover{
  background-color: white;
}
.headerButton:focus{
  background-color: white;
}
</style>